---
title: Docs Page
description: A page in your documentation
---

<Customisation />

Page is the base element of a documentation, it includes Table of contents,
Footer, and Breadcrumb.

## Usage

Import it according to your layout.

```tsx title="page.tsx" tab="Docs Layout"
import {
  DocsPage,
  DocsDescription,
  DocsTitle,
  DocsBody,
} from 'fumadocs-ui/layouts/docs/page';

<DocsPage>
  <DocsTitle>title</DocsTitle>
  <DocsDescription>description</DocsDescription>
  <DocsBody>
    <h2>This heading looks good!</h2>
    It applies the Typography styles, wrap your content here.
  </DocsBody>
</DocsPage>;
```

```tsx title="page.tsx" tab="Notebook Layout"
import {
  DocsPage,
  DocsDescription,
  DocsTitle,
  DocsBody,
} from 'fumadocs-ui/layouts/notebook/page';

<DocsPage>
  <DocsTitle>title</DocsTitle>
  <DocsDescription>description</DocsDescription>
  <DocsBody>
    <h2>This heading looks good!</h2>
    It applies the Typography styles, wrap your content here.
  </DocsBody>
</DocsPage>;
```

<Callout type='info' title='Good to know'>

Instead of rendering the title with `DocsTitle` in `page.tsx`, you can put the title into MDX file.
This will render the title in the MDX body.

</Callout>

### Edit on GitHub

Link to the original GitHub file with your component.

```tsx
// docs layout:
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';

<DocsPage>
  <a
    href={`https://github.com/fuma-nama/fumadocs/blob/main/content/docs/${page.path}`}
    rel="noreferrer noopener"
    target="_blank"
    className="w-fit border rounded-xl p-2 font-medium text-sm text-fd-secondary-foreground bg-fd-secondary transition-colors hover:text-fd-accent-foreground hover:bg-fd-accent"
  >
    Edit on GitHub
  </a>
</DocsPage>;
```

### Last Updated Time

Display last updated time of the page.

```tsx
// docs layout:
import { DocsPage, PageLastUpdate } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage, PageLastUpdate } from 'fumadocs-ui/layouts/notebook/page';

const lastModifiedTime: Date | undefined;

<DocsPage>
  {/* Other content */}
  {lastModifiedTime && <PageLastUpdate date={lastModifiedTime} />}
</DocsPage>;
```

For `lastModifiedTime`, you can possibly use different version controls like Github or a CMS.

<Tabs items={['Fumadocs MDX', 'GitHub API']}>

    <Tab>

You can enable [`lastModified`](/docs/mdx/last-modified).

```tsx
import { source } from '@/lib/source';
const page = source.getPage(['...']);

const lastModifiedTime = page.data.lastModified;
```

    </Tab>

    <Tab>

For Github hosted documents, you can use
the [`getGithubLastEdit`](/docs/headless/utils/git-last-edit) utility.

```tsx
import { getGithubLastEdit } from 'fumadocs-core/content/github';

const lastModifiedTime = await getGithubLastEdit({
  owner: 'fuma-nama',
  repo: 'fumadocs',
  // file path in Git
  path: `content/docs/${page.path}`,
});
```

    </Tab>

</Tabs>

## Configurations

### Full Mode

To extend the page to fill up all available space, pass `full` to the page component.
This will force TOC to be shown as a popover.

```tsx
// docs layout:
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';

<DocsPage full>...</DocsPage>;
```

### Table of Contents

An overview of all the headings in your article, it requires an array of headings.

For Markdown and MDX documents, You can obtain it using the
[TOC Utility](/docs/headless/utils/get-toc). Content sources like Fumadocs MDX offer this out-of-the-box.

```tsx
// docs layout:
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';

<DocsPage toc={headings}>...</DocsPage>;
```

You can customise or disable it with the `tableOfContent` option, or with `tableOfContentPopover` on smaller devices.

```tsx
// docs layout:
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';

<DocsPage tableOfContent={options} tableOfContentPopover={options}>
  ...
</DocsPage>;
```

<auto-type-table path="../../props.ts" name="TOCProps" />

#### Style

You can choose another style for TOC, like `clerk` inspired by https://clerk.com:

```tsx
// docs layout:
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';

<DocsPage
  tableOfContent={{
    style: 'clerk',
  }}
>
  ...
</DocsPage>;
```

You can also style the TOC title with the `toc-title` ID.

### Footer

Footer is a navigation element that has two buttons to jump to the next and previous pages. When not specified, it shows the neighbour pages found from page tree.

Customise the footer with the `footer` option.

```tsx
// docs layout:
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';

<DocsPage footer={options}>...</DocsPage>;
```

<auto-type-table path="../../props.ts" name="FooterProps" />

### Breadcrumb

A navigation element, shown only when user is navigating in folders.

<auto-type-table path="../../props.ts" name="BreadcrumbProps" />
